<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/prettify.css" />
<script type="text/javascript" src="../js/prettify.js"></script>
<title>无标题文档</title>
<script type="text/javascript">
var sideW = prompt( "主侧边的像素宽度（无需单位）", "240" );
var asideW = prompt( "副侧边的像素宽度（无需单位）", "240" );
if( sideW > 0 ){
	var wrapW = prompt( "外套的宽度（像素值、百分比或值“auto”，需要单位）", "auto" );
	if( asideW > 0 ){
		var sideWidth   = sideW  + "px";
		var asideWidth  = asideW + "px";
		var wrapWidth   = wrapW;
		var sAndAsWidth = parseInt(sideW) + parseInt(asideW) + "px";
		document.writeln('<pre class="prettyprint linenums">');
		document.writeln('/* Hybrid - Tuding Layout System v3.0 - copyright(c)bubujie.net */');
		document.writeln('/* ######### ######### ######### BEGIN::Hybrid ######### ######### ######### */');
		document.writeln('/* Body */');
		document.writeln('body { margin:0; padding:0; }');
		document.writeln('/* bHead & bBody & bFoot & Wrapping & Filling */');
		document.writeln('#bhead, #bbody, #bfoot, .wrapping, .filling { position:relative; clear:both; *zoom:1; }');
		document.writeln('#bhead:after, #bbody:after, #bfoot:after, .wrapping:after, .filling:after { content:""; display:block; clear:both; }');
		document.writeln('/* Wrapping width */');
		document.writeln('.wrapping { width:'+wrapWidth+'; margin-left:auto; margin-right:auto; }');
		document.writeln('/* Wrapping align */');
		document.writeln('.lefting .wrapping { margin-left:0; }');
		document.writeln('.righting .wrapping { margin-right:0; }');
		document.writeln('/* Ming & Ning & Ding */');
		document.writeln('.ming, .ning, .ding { position:relative; *zoom:1; }');
		document.writeln('.ming:after, .ning:after, .ding:after { content:""; display:block; clear:both; }');
		document.writeln('/* bHead li & bFoot li */');
		document.writeln('#bhead ul, #bfoot ul { position:relative; }');
		document.writeln('#bhead li, #bfoot li { position:relative; float:left; list-style:none; }');
		document.writeln('/* Hybrid M */');
		document.writeln('.m .ming {  }');
		document.writeln('/* Hybrid MN */');
		document.writeln('.mn .filling { padding-right:'+sideWidth+'; }');
		document.writeln('.mn .ming { float:left; width:100%; }');
		document.writeln('.mn .n1, .mn .n2 { width:'+sideWidth+'; float:right; margin-left:-'+sideWidth+'; right:-'+sideWidth+'; } /*add(.mn .n2)*/');
		document.writeln('/* Hybrid NM */');
		document.writeln('.nm .filling { padding-left:'+sideWidth+'; }');
		document.writeln('.nm .ming { float:right; width:100%; }');
		document.writeln('.nm .n1, .nm .n2 { width:'+sideWidth+'; float:left; margin-right:-'+sideWidth+'; left:-'+sideWidth+'; } /*add(.nm .n2)*/');
		document.writeln('/* Hybrid MNN */');
		document.writeln('.mnn .filling { padding-right:'+sAndAsWidth+'; }');
		document.writeln('.mnn .ming { float:left; width:100%; }');
		document.writeln('.mnn .n1 { float:right; width:'+sideWidth+'; margin-left:-'+sideWidth+'; right:-'+sideWidth+'; }');
		document.writeln('.mnn .n2 { float:right; width:'+asideWidth+'; margin-left:-'+asideWidth+'; right:-'+sAndAsWidth+'; }');
		document.writeln('/* Hybrid NMN */');
		document.writeln('.nmn .filling { padding-left:'+sideWidth+'; padding-right:'+asideWidth+'; }');
		document.writeln('.nmn .ming { float:left; margin-right:-100%; width:100%; }');
		document.writeln('.nmn .n1 { float:left; width:'+sideWidth+'; margin-right:-'+sideWidth+'; left:-'+sideWidth+'; }');
		document.writeln('.nmn .n2 { float:right; width:'+asideWidth+'; margin-left:-'+asideWidth+'; right:-'+asideWidth+'; }');
		document.writeln('/* Hybrid NNM */');
		document.writeln('.nnm .filling { padding-left:'+sAndAsWidth+'; }');
		document.writeln('.nnm .ming { float:right; width:100%; }');
		document.writeln('.nnm .n1 { float:left; width:'+sideWidth+'; margin-right:-'+sideWidth+'; left:-'+sAndAsWidth+'; }');
		document.writeln('.nnm .n2 { float:left; width:'+asideWidth+'; margin-right:-'+asideWidth+'; left:-'+asideWidth+'; }');
		document.writeln('/* Width */');
		document.writeln('.wrapping .w-1     {  }');
		document.writeln('.wrapping .w-1-2   { width:50%; }');
		document.writeln('.wrapping .w-1-3   { width:33.33333%; }');
		document.writeln('.wrapping .w-2-3   { width:66.66666%; }');
		document.writeln('.wrapping .w-1-4   { width:25%; }');
		document.writeln('.wrapping .w-3-4   { width:75%; }');
		document.writeln('.wrapping .w-1-5   { width:20%; }');
		document.writeln('.wrapping .w-2-5   { width:40%; }');
		document.writeln('.wrapping .w-3-5   { width:60%; }');
		document.writeln('.wrapping .w-4-5   { width:80%; }');
		document.writeln('.wrapping .w-1-6   { width:16.656%; }');
		document.writeln('.wrapping .w-5-6   { width:83.33%; }');
		document.writeln('.wrapping .w-1-8   { width:12.5%; }');
		document.writeln('.wrapping .w-3-8   { width:37.5%; }');
		document.writeln('.wrapping .w-5-8   { width:62.5%; }');
		document.writeln('.wrapping .w-7-8   { width:87.5%; }');
		document.writeln('.wrapping .w-1-12  { width:8.3333%; }');
		document.writeln('.wrapping .w-5-12  { width:41.6666%; }');
		document.writeln('.wrapping .w-7-12  { width:58.3333%; }');
		document.writeln('.wrapping .w-11-12 { width:91.6666%; }');
		document.writeln('.wrapping .w-1-24  { width:4.1666%; }');
		document.writeln('.wrapping .w-5-24  { width:20.8333%; }');
		document.writeln('.wrapping .w-7-24  { width:29.1666%; }');
		document.writeln('.wrapping .w-11-24 { width:45.8333%; }');
		document.writeln('.wrapping .w-13-24 { width:54.1666%; }');
		document.writeln('.wrapping .w-17-24 { width:70.8333%; }');
		document.writeln('.wrapping .w-19-24 { width:79.1666%; }');
		document.writeln('.wrapping .w-23-24 { width:95.8333%; }');
		document.writeln('/* X (Horizontal) */');
		document.writeln('.xcn { clear:none; }');
		document.writeln('.xcl { clear:left; }');
		document.writeln('.xcr { clear:right; }');
		document.writeln('.xcb { clear:both; }');
		document.writeln('.xfn { float:none; }');
		document.writeln('.xfl { float:left; }');
		document.writeln('.xfr { float:right; }');
		document.writeln('.xfc { margin-left:auto; margin-right:auto; }');
		document.writeln('/* ######### ######### ######### END::Hybrid ######### ######### ######### */');
		document.writeln('</pre>');
		
	}
}
//prettyPrint();

</script>
</head>
<body>



</body>
</html>
